<template>
	<div class='page-payment'>
		<nav-header></nav-header>
		<div class='tip'>请在30分钟内完成支付，否则订单会自动取消</div>
		<div class='detail'>
			<div class='summary'>
				应付金额 <span class='price' name='price'></span>
			</div>
			<div class='row' method='alipay'>
				<i class='checkbox checked'></i>
				<img class='payment-icon' src="../../../static/img/alipay.png" />
				<span class='payment-name'>支付宝支付</span>
			</div>
			<div class='row' method='wxpay'>
				<i class='checkbox'></i>
				<img class='payment-icon' src="../../../static/img/wxpay.png" />
				<span class='payment-name'>微信支付</span>
			</div>
		</div>
		<center>
			<div>
				<div class='ui-btn-paynow' @click="gotopay">立即支付</div>
			</div>
			<div class='note'>支付即表示您已阅读，并同意
				<a class='lnk'>《支付协议》</a>
			</div>
		</center>
	</div>
</template>

<script>
	import header from "@/components/header/header"
	import { Toast } from 'mint-ui';
	import { mapGetters, mapState, mapActions } from 'vuex';
	export default {
		data() {
			return {}
		},
		mounted() {
			// 获取支付渠道
			if(yzBroserIsNative()) {
				plus.payment.getChannels(function(channels) {
					payChannels = channels;
				});
			}
		},
		created() {},
		computed: {
			...mapState(['paymentDetail'])
		},
		methods: {
			...mapActions(['getShoppingDetail']),
			gotopay() {
				if(yzBroserIsNative()) {
					// 支付接口
					var payServer = 'papi/WxAppPay.php?orderId=' + orderId;
					if(payMethod == 'alipay') {
						payServer = 'papi/AliAppPay.php?orderId=' + orderId;
					}

					// 转换成渠道
					var channel = null;
					for(var i = 0; i < payChannels.length; i++) {
						// plus.nativeUI.alert(payMethod);
						// plus.nativeUI.alert(JSON.stringify(payChannels[i]));
						if(payChannels[i].id == payMethod) {
							channel = payChannels[i];
							break;
						}
					}
					if(channel == null) {
						Toast("没有支付渠道！");
						return;
					}

					// ajax请求
					var xhr = new XMLHttpRequest();
					xhr.onreadystatechange = function() {
						switch(xhr.readyState) {
							case 4:
								if(xhr.status == 200) {
									plus.payment.request(channel, xhr.responseText, function(result) {
										// plus.nativeUI.alert(xhr.responseText);
										plus.nativeUI.alert("支付成功！");

										// 跳转到团队界面
//										var data = yz.data.get('activity-payment');
//										if(data.target == 'activity-order') {
//											yz.page.reload('joined-activities');
//											yz.page.reload('activity-order');
//										} else {
//											//yz.data.set('team-info', data);
//											yz.page.reload('map');
//											yz.page.reload('activity-detail');
//											yz.page.open('joined-activities');
//										}
//										$('.page-activity-payment').closeYzPage();
									}, function(error) {
										plus.nativeUI.alert("支付失败：" + error.code);
									});
								} else {
									alert("获取订单信息失败！");
								}
								break;
							default:
								break;
						}
					}
					xhr.open('GET', payServer);
					xhr.send();
				} else {
					Toast('请下载APP完成支付');
				}
			}
		},
		components: {
			"nav-header": header,
		}
	}
</script>

<style lang="scss" scoped>
	.page-payment {
		margin: 90px 0 120px;
		padding: 0 40px;
		.tip {
			color: #9b9b9b;
			font-size: 24px;
			line-height: 67px;
			margin: 0 32px;
		}
		.detail {
			background-color: #fff;
			.summary {
				margin: 0 32px;
				padding: 48px 0;
				font-size: 30px;
				color: #4a4a4a;
				.price {
					color: #961e32;
					font-size: 48px;
					margin-left: 36px;
				}
			}
			.row {
				display: flex;
				align-items: center;
				margin: 0 32px;
				padding: 20px 0;
				border-top: 2px solid #e5e5e5;
				.checkbox {
					display: inline-block;
					background-size: 100% 100%;
					width: 32px;
					height: 32px;
					background-image: url(https://saoke.oss-cn-shenzhen.aliyuncs.com/m/img/icon/unchecked.png);
				}
				.checked {
					background-image: url(https://saoke.oss-cn-shenzhen.aliyuncs.com/m/img/icon/checked.png);
				}
				.payment-icon {
					width: 66px;
					height: 66px;
					margin-left: 56px;
					margin-right: 56px;
				}
				.payment-name {
					-webkit-box-flex: 1;
					-ms-flex: 1;
					flex: 1;
					font-size: 30px;
					color: #4a4a4a;
				}
			}
		}
		.ui-btn-paynow {
			margin-top: 88px;
			margin-bottom: 28px;
			display: inline-block;
			text-align: center;
			border-radius: 8px;
			background-color: #961E32;
			color: #fff;
			width: 460px;
			height: 88px;
			line-height: 88px;
			font-size: 32px;
		}
		.note {
			font-size: 24px;
			.lnk {
				color: #961e32;
			}
		}
	}
</style>